<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>学员信息表</title>
	</head>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		h2{
			color: #fff;
		}
		body{
			background: blueviolet;
		}
		
		.lb p{
			color: #fff;
		}
		.haed {
			width: 100%;
			height: 260px;
			background: #FFFF00;
			color: #fff;
			text-align: center;
			padding-top: 80px;
			margin-bottom: 30px;
		}
		
		.haed-one h1 {
			font-size: 50px;
			
		}
		
		.mian {
			width: 1160px;
			margin: auto;
		}
		
		.zy input,
		button {
			width: 200px;
			height: 30px;
			margin-left: 25px;
			
		}
		
		.zy input {
			padding-left: 10px;
		}
		
		.zy input:first-child {
			margin-left: 0;
		}
		
		.h2 {
			margin-bottom: 20px;
		}
		
		.hh {
			width: 200px;
			height: 33px;
			margin-left: 25px;
		}
		
		.foorot{
			width: 1160px;
			margin: auto;
			margin-top: 20px;
		}
		.lb{
			width: 100%;
			height: 50px;
			border-top:1px solid greenyellow;
			border-bottom:1px solid greenyellow;
			overflow: hidden;
		}
		
		p{
			
			margin-left: 400px;
			float: left;
			font-size: 25px;
			margin-top: 5px;
		}
		p:first-child{
			margin-left:0;
		}
		#list{
			list-style: none;
		}
		#list li span:first-child{
			display: inline-block;
			margin-left: 16px;
		}
		#list li span{
			display: inline-block;
			margin-left: 361px;
			color: aqua;
			margin-top: 3px;
		}
		#list li{
			margin-top: 20px;
			width: 100%;
			padding: 10px;
			border: 1px solid lightyellow;
		}
		#list li span{
			width: 80px;
			
			height: 100%;
		}
		#list li span:last-child{
			margin-left: 375px;
		}
	</style>

	<body>
		<div class="haed">
			<div class="haed-one">
				<h1>学员信息表</h1>
				<a>1804班</a>
			</div>
		</div>

		<div class="mian">
			<h2 class="h2">添加</h2>
			<span class="zy">
				<input type="" name="" id="n" value="" placeholder="姓名"/>
				<select class="hh" id="s">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
				<input type="" name="" id="a" value="" placeholder="年龄"/>
				<button id="btn">添加</button>
			</span>
		</div>

		<div class="foorot">
			<h2 class="h2">列表</h2>
			<div class="lb">
				<p>姓名</p>
				<p>性别</p>
				<p>年龄</p>
			</div>
			<ul id="list"></ul>
		</div>
	</body>
	<script type="text/javascript">
		document.querySelector("#btn").addEventListener("click", function() {
			var n = document.querySelector("#n").value;
			console.log(n);
			var s = document.querySelector("#s").value;
			console.log(s);
			var a = document.querySelector("#a").value;
			console.log(a);

			var xmlhttp;
			if(window.XMLHttpRequest) {
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp = new XMLHttpRequest();
			} else {
				// IE6, IE5 浏览器执行代码
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

						loadXMLDoc();
					//document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
				}
			}
			

			
			xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n + "&sex=" + s + "&age=" + a, true);
			xmlhttp.send();
			
			
		})
		
		
		
		function loadXMLDoc() {
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						
						var json = JSON.parse(xmlhttp.responseText);
						console.log(json);
						json = json.data.reverse()
						list.innerHTML='';
						
						for(let i=0; i<json.length; i++){
							var li = document.createElement('li');
							
							var spanName = document.createElement('span');
							spanName.innerHTML = json[i].studentName;
							
							var spanSex = document.createElement('span');
							spanSex.innerHTML = json[i].sex;
							var spanAge = document.createElement('span');
							spanAge.innerHTML = json[i].age;
							
							
							li.appendChild(spanName);
							li.appendChild(spanSex);
							li.appendChild(spanAge);
							
							document.querySelector('#list').appendChild(li);
						}
						
						//document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
					}
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
				xmlhttp.send();
				n.value = '';
				a.value = '';
				s.value = '男';
								
			}
		
			
			loadXMLDoc();
			
	</script>

</html>